<link rel="stylesheet" href="assets/module/formSelects/formSelects-v4.css"/>
<link rel="stylesheet" href="assets/module/city-picker/city-picker.css"/>
<script src="assets/module/city-picker/city-picker.data.js"></script>
<style>
    #tbBasic .city-picker-span {
        width: auto !important;
        padding-right: 20px !important;;
        min-width: 163px !important;;
    }
</style>
<!-- 正文开始 -->
<div id="tbBasic" class="layui-fluid" style="padding-bottom: 180px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">加载层</div>
                <div class="layui-card-body" id="divLoading">
                    <p class="layui-text">
                        通过admin.showLoading()和admin.removeLoading()控制。
                    </p><br>
                    <button id="btnShowLoading1" class="layui-btn layui-btn-sm">显示加载层</button>
                    <button id="btnShowLoading2" class="layui-btn layui-btn-sm">样式二</button>
                    <button id="btnLoading" class="layui-btn layui-btn-sm">按钮loading</button>
                    <br><br>
                </div>
            </div>
        </div>

        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">省市区联动选择</div>
                <div class="layui-card-body layui-form">
                    <p class="layui-text">
                        此插件来自于社区，<a href="https://fly.layui.com/extend/citypicker/#doc" target="_blank">前往查看</a>。
                    </p><br>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">请选择：</label>
                        <div class="layui-input-inline mr0">
                            <input id="edtCity" class="layui-input" type="text" placeholder="输入选择城市"/>
                        </div>
                    </div>
                    <br><br>
                </div>
            </div>
        </div>

        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">下拉表格选择器</div>
                <div class="layui-card-body">
                    <p class="layui-text">
                        此插件来自于社区，<a href="https://fly.layui.com/extend/tableSelect/" target="_blank">前往查看</a>。
                    </p><br>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">请选择：</label>
                        <div class="layui-input-inline mr0">
                            <input id="selTable" autocomplete="off" class="layui-input" type="text" placeholder="输选择"/>
                        </div>
                    </div>
                    <br><br>
                </div>
            </div>
        </div>

        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">多选下拉框</div>
                <div class="layui-card-body">
                    <p class="layui-text">
                        此插件来自于社区，<a href="https://fly.layui.com/extend/formSelects/" target="_blank">前往查看</a>。
                    </p><br>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">请选择：</label>
                        <div class="layui-input-inline mr0" style="width: 290px;">
                            <select name="city" xm-select="selDemo">
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">广州</option>
                                <option value="4">深圳</option>
                                <option value="5">天津</option>
                            </select>
                        </div>
                    </div>
                    <br><br>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'admin', 'citypicker', 'formSelects', 'tableSelect'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var cityPicker = layui.citypicker;
        var formSelects = layui.formSelects;
        var tableSelect = layui.tableSelect;

        // 显示加载层
        $('#btnShowLoading1').click(function () {
            admin.showLoading('#divLoading', 1, '.9');
            setTimeout(function () {
                admin.removeLoading('#divLoading', true, true);
            }, 1000);
        });
        $('#btnShowLoading2').click(function () {
            admin.showLoading('#divLoading', 2, '.8');
            setTimeout(function () {
                admin.removeLoading('#divLoading', true, true);
            }, 1000);
        });

        // loading按钮
        $('#btnLoading').click(function () {
            admin.btnLoading('#btnLoading');
            setTimeout(function () {
                admin.btnLoading('#btnLoading', false);
            }, 2000);
        });

        form.render();
        formSelects.render();

        // 城市选择器
        var cp = new cityPicker("#edtCity");
        cp.setValue("湖北省/武汉市/武昌区");

        // 下拉表格选择器
        tableSelect.render({
            elem: '#selTable',	// 定义输入框input对象
            checkedKey: 'userId', // 表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'keyword',	// 搜索输入框的name值 默认keyword
            searchPlaceholder: '关键词搜索',	// 搜索输入框的提示文字 默认关键词搜索
            table: {
                url: 'json/user.json',
                cellMinWidth: 100,
                cols: [[
                    {type: 'checkbox'},
                    {field: 'username', sort: true, title: '账号'},
                    {field: 'nickName', sort: true, title: '用户名'},
                    {field: 'phone', sort: true, title: '手机号'},
                    {field: 'sex', sort: true, title: '性别'}
                ]]
            },
            done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                var selVal = [];
                for (var i = 0; i < data.data.length; i++) {
                    selVal.push(data.data[i].nickName);
                }
                elem.val(selVal.join(','));
            }
        })

    });
</script>